<template>
    <div id="chargedetail">
        <mt-header fixed title="用户充值详情">
            <mt-button icon="back" @click.native="$router.go(-1);" slot="left">返回</mt-button>
        </mt-header>
        <div class="showResult lay">
            <div class="contentResult" style="">
                <div @click.native="toPath(item.ID)" :key="index" v-for="(item,index) in group.arr">
                </div>
                <div class="record" :key="index" v-for="(item,index) in group.arr">
                    <div style="width:120px;"><span class="title"><i class="iconfont icon-shijian4"></i> 充值时间</span><br/><span>{{(item.create_date)}}</span></div>
                    <div style="flex:1"><span class="title"><i class="iconfont icon-nicheng"></i> 昵称</span><br/><span>{{item.szName}}</span></div>
                    <div style="flex:1"><span class="title"><i class="iconfont icon-eq"></i> id</span><br/><span>{{item.nPlayerId}}</span></div>
                    <div style="flex:1"><span class="title"><i class="iconfont icon-chongzhi"></i> 充值金额</span><br/><span>{{item.total_fee/100}}元</span></div>
                </div>
               
                <div v-if=" group.arr.length==0" class="noresult">
                    无符合条件的数据
                </div>
            </div>
        </div>
        </mt-datetime-picker>
        <mt-popup v-model="popupVisible" position="top" :modal="false" pop-transition="popup-fade">
            {{msg}}
        </mt-popup>
    </div>
</template>

<script>
    import {
        MessageBox
    } from "mint-ui";
    export default {
        name: 'chargedetail',
        data() {
            return {
                popupVisible: false,
                starttime: 0,
                endtime: 0,
                msg: "",
                group: {
                    arr: [],
                    totalCount: 0,
                    nextPage: 0,
                    totalPages: 0
                }
            }
        },
        methods: {
            getList: function(getData) {
                let that = this;
                this.$http.get(`${this.baseUrl}/Main/GetData`, getData).then(response => {
                  //  console.log(response);
                    let data = response.data;
                    // that.popupVisible = true;
                    // that.msg = data.msg;
                    // let time = setTimeout(function() {
                    //     that.popupVisible = false;
                    //     that.msg = "";
                    //     clearTimeout(time);
                    // }, that.SETTIME);
                    if (data.code == 1) {
                        that.group.arr = that.group.arr.concat(data.body);
                        that.group.nextPage = that.group.nextPage + 1;
                        that.group.totalPages = Math.ceil(data.totalCount / that.PAGESIZE);
                        that.group.totalCount = data.totalCount;
                        // console.log(data);
                    } else {
                        MessageBox("提示", data.msg)
                    }
                })
            },
            initview() {
                this.group = {
                    arr: [],
                    totalCount: 0,
                    nextPage: 0,
                    totalPages: 0
                }
                let getData = {
                    params: {
                        'functionname': "UserRechargeDetail",
                        body: JSON.stringify({
                            nPlayerId: parseInt(this.$route.params.id),
                            createDate: this.$route.params.time
                        })
                    }
                }
                //console.log(getData);
                this.getList(getData)
            },
        },
        created() {
            this.initview()
        },
        mounted() {
            this.$nextTick(function() {
                document.body.style.background = "#fffbef";
            })
        }
    }
</script>

<style lang="scss" scoped>
    #chargedetail {
        margin-top: -20PX;
    }
    .record {
        display: flex;
        text-align: left;
        margin-bottom: 20px;
        background: #fff;
        align-items: center;
        div {
            overflow: hidden;
            padding: 10px 0;
            padding-left: 5px;
            font-size: 12px;
            line-height: 2;
            color: #9e9e9e;
            .title {
                color: #634747;
            }
        }
    }
    .showResult .contentResult {
        background: #fffbef;
        padding: 20px 0;
    }
    .showResult {
        padding: 10px;
        font-size: 16px;
        color: #fcb645;
        font-weight: 500;
        background: #fffbef;
    }
</style>


   